<!--
 * @Author: hannghaiwang 1245460957@qq.com
 * @Date: 2023-10-10 14:16:07
 * @LastEditors: hannghaiwang 1245460957@qq.com
 * @LastEditTime: 2023-10-11 10:04:06
 * @FilePath: \SVG\动态计算多标签.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            #div1{
                width: 780px;
                height: 400px;
                /* background: url("动态多标签.svg"); */
            }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script>
        window.onload=()=>{
            let svgNS='http://www.w3.org/2000/svg' //命名空间
            let oParent=document.getElementById('div1');
            //计算中心点
            let centerX=oParent.offsetWidth/2
            let centerY=oParent.offsetHeight/2

            let circleNum=9
            let angleNum=360/circleNum;
            let centerR=160;
            let data={
                centerNode:{text:'前端'},
                otherNode:[
                ]
            }
            for (var i=0;i<angleNum;i++){
                let y=Math.sin(i*40*Math.PI/180)*centerR+centerY;
                let x=Math.cos(i*40*Math.PI/180)*centerR+centerX
                data.otherNode.push({x:x,y:y,text:i})
            }

   

            function addTag(){

                
                let oSvg = createTag('svg',{'xmls':svgNS,'width':"100%",'height':'100%'});

                for(var i=0;i<data.otherNode.length;i++){
                    addOtherTag(data.otherNode[i],oSvg)
                }

                let oG = createTag('g',{'style':'cursor:pointer'})
                let oCircle =createTag('circle',{'cx':centerX,'cy':centerY,'r':'60','fill':'white','stroke':'red','stroke-width':'1'})
                let oText =createTag('text',{'x':centerX,'y':centerY+8,'font-szie':'20','text-anchor':'middle'})
                oText.innerHTML=data.centerNode.text;

                oG.appendChild(oCircle)
                oG.appendChild(oText)

                oSvg.appendChild(oG)
                oParent.appendChild(oSvg)


            }   

            addTag()

         function  addOtherTag(otherAttr,oSvg){
                            //添加直线和中间的方形
                var oG=createTag('g',{'style':'cursor:pointer','class':'lineStyle'});
                let oLine1=createTag('line',{'x1':otherAttr.x,'y1':otherAttr.y,'x2':centerX,'y2':centerY,'stroke':"#ccc"})
                let oLine2=createTag('line',{'x1':otherAttr.x,'y1':otherAttr.y,'x2':centerX,'y2':centerY,'stroke':"transparent",'stroke-width':'10'})
                let oRect =createTag('rect',{'x':(otherAttr.x + centerX)/2-10,'y':(otherAttr.y + centerY)/2-10,'fill':"#999",'width':'20','height':'20','rx':5})
                var oText =createTag('text',{'x':(otherAttr.x + centerX)/2,'y':(otherAttr.y + centerY)/2+8,'fill':"white",'font-size':'20','text-anchor':'middle'})
                oText.innerHTML='?'
                oG.appendChild(oLine1)
                oG.appendChild(oLine2)
                oG.appendChild(oRect)
                oG.appendChild(oText)
                oSvg.appendChild(oG)

                //添加圆
                var oG=createTag('g',{'style':'cursor:pointer','class':'circleStyle'});
                let oCircle=createTag('circle',{'cx':otherAttr.x,'cy':otherAttr.y,'r':'30','fill':'white','stroke':'red','stroke-width':'1'})
                var oText =createTag('text',{'x':otherAttr.x,'y':otherAttr.y+8,'font-size':'20','text-anchor':'middle'})
                oText.innerHTML=otherAttr.text
                oG.appendChild(oCircle)
                oG.appendChild(oText)
                oSvg.appendChild(oG)



            }
            //创建标签函数
            function createTag(tag,objAttr){
                let oTag=document.createElementNS(svgNS,tag)

                for(var attr in objAttr){
                    oTag.setAttribute(attr,objAttr[attr])
                }
                return oTag
            }
            bindTag()
            function bindTag(){
                let aLine =document.getElementsByClassName('lineStyle')
                let aCircle=document.getElementsByClassName('circleStyle')

                for(let i=0;i<aCircle.length;i++){
                    aCircle[i].onmouseenter=function(){
                        startMove(this.getElementsByTagName('circle')[0],30,40)
                        let prevLine =this.previousElementSibling; //返回指定元素的前一个兄弟元素
                        prevLine.getElementsByTagName('line')[0].setAttribute('stroke','blue')
                        prevLine.getElementsByTagName('rect')[0].setAttribute('fill','blue')
                    }
                    aCircle[i].onmouseleave=function(){
                        startMove(this.getElementsByTagName('circle')[0],40,30)
                        let prevLine =this.previousElementSibling;
                        prevLine.getElementsByTagName('line')[0].setAttribute('stroke','#ccc')
                        prevLine.getElementsByTagName('rect')[0].setAttribute('fill','#999')
                    }
                }
                for(let i=0;i<aLine.length;i++){
                    aLine[i].onmouseover=function(){
                        this.getElementsByTagName('line')[0].setAttribute('stroke','blue')
                        this.getElementsByTagName('rect')[0].setAttribute('fill','blue')
                        let prevLine =this.nextElementSibling;
                        startMove(prevLine.getElementsByTagName('circle')[0],30,40)
                    }
                    aLine[i].onmouseleave=function(){
                        this.getElementsByTagName('line')[0].setAttribute('stroke','#ccc')
                        this.getElementsByTagName('rect')[0].setAttribute('fill','#999')
                        let prevLine =this.nextElementSibling;
                        startMove(prevLine.getElementsByTagName('circle')[0],40,30)
                    }
                }
            }
            

            //弹性运行动画
        function startMove(obj,r1,r2) {
            clearInterval(obj.timer);
        var nowr=r1;
        var over=r2;
        obj.speed=0;
        obj.timer=setInterval(function(){
            obj.speed+=(over-nowr)/6;
            //修改系数,系数越大,上下弹的波数越大，1为无限弹
            obj.speed*=0.9;
            //终止条件
            if(Math.abs(over-nowr)<=1 && Math.abs(obj.speed)<=1){
                clearInterval(obj.timer);
                obj.setAttribute('r',over);
             //弹性运动   
            }else{
                nowr+=obj.speed;
                obj.setAttribute('r',nowr);
            }
        },30)
    }
        }
       
    </script>
</body>
</html>